<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--360浏览器优先以webkit内核解析-->
		<title>运营管理</title>
	    <meta name="keywords" content="运营后台管理">
	    <meta name="description" content="运营后台管理">
		<link rel="shortcut icon" href="static/favicon.ico">
		<link href="static/css/bootstrap.min.css" rel="stylesheet" />
		<link href="static/css/font-awesome.min.css" rel="stylesheet" />
		<link href="static/css/main/animate.min.css" rel="stylesheet" />
		<link href="static/css/main/style.min862f.css" rel="stylesheet" />
		<!--    <link href="static/ajax/libs/jquery-layout/jquery.layout-latest.css}"  rel="stylesheet"/>-->
		<!--    <link href="static/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}"  rel="stylesheet"/>-->
		<link href="static/css/main/main.css" rel="stylesheet" />
		<style type="text/css">
			.float {
				float: left;
			}
			
			ul,
			.order {
				list-style: none;
				overflow: hidden;
				width: 100%;
				padding-left: 0px;
			}
			
			ul li {
				float: left;
				overflow: hidden;
				width: 25%;
			}
			
			.title {
				font-family: "PingFang HK Regular", "PingFang HK";
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
				color: #989898;
			}
			
			.je {
				font-family: "Helvetica Neue Regular", "Helvetica Neue";
				font-weight: 500;
				font-style: normal;
				font-size: 28px;
				color: #666666;
			}
			
			.t1 {
				border: 1px solid rgba(235, 235, 235, 1);
				overflow: hidden;
				padding: 15px 10px;
				margin: 15px 5px;
			}
			
			.price {
				font-family: "PingFang SC 中等", "PingFang SC";
				font-weight: 400;
				font-style: normal;
				font-size: 24px;
				color: #1e1e1e;
			}
			
			.jy-history {
				font-family: "PingFang SC 粗体", "PingFang SC";
				font-weight: 650;
				font-style: normal;
				font-size: 16px;
				color: #666666;
				line-height: 21px;
			}
		</style>
	</head>

	<body class="gray-bg">
		<div style="margin: 10px 35px;background-color: #fff;">

			<div  style="padding: 5px 15px;">
				<div class="code" style="margin: 5px;display: none; border: 1px solid rgba(235, 235, 235, 1);overflow: hidden;margin-left: 5px;">
					<div style="line-height: 40px;height: 40px;background-color: rgba(235, 235, 235, 1);padding-left: 10px;">请输入验证码</div>
					<div class="col-md-4" style="margin: 10px;padding-left: 0px;">
						<div class="input-group">
							<input name="code" id="code" type="text" class="form-control" placeholder="输入预定验证码、约战中奖码及红包">
							<span class="input-group-btn">
			            	<button class="btn btn-primary" id="search_code_btn">查询验证</button>
			            </span>
						</div>
						<!-- /input-group -->
					</div>
				</div>
				<ul>
					<li>
						<div class="t1">
							<div align="center" class="float" style="background-color: rgba(73, 169, 238, 1);width: 56px;height: 56px;line-height: 56px;border-radius: 30px;">
								<img src="static/img/main/t1.png" />
							</div>
							<div class="float" style="    margin-left: 15px;">
								<div class="title">历史车辆缴费金额</div>
								<div id="countorder" name="countorder" class="je">234324</div>
								<div><img src=""></div>
							</div>
						</div>
					</li>
					<li>
						<div class="t1">
							<div align="center" class="float" style="background-color: rgba(152, 216, 125, 1);width: 56px;height: 56px;line-height: 56px;border-radius: 30px;">
								<img src="static/img/main/t2.png" />
							</div>
							<div class="float" style="margin-left: 15px;">
								<div class="title">本周车辆缴费金额</div>
								<div id="countpaysum" name="countpaysum" class="je">13733</div>
								<div>
									<img src="static/img/main/bottom.png">
									<span style="color: rgba(240, 65, 51, 1);">10% </span>同比上周
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="t1">
							<div align="center" class="float" style="background-color: rgba(255, 216, 110, 1);width: 56px;height: 56px;line-height: 56px;border-radius: 30px;">
								<img src="static/img/main/t3.png" />
							</div>
							<div class="float" style="    margin-left: 15px;">
								<div class="title">本周发布公告</div>
								<div id="countpayordersum" name="countpayordersum" class="je">133</div>
								<div>
									<img src="static/img/main/top.png">
									<span style="color: rgba(0, 169, 80, 1);">4% </span>同比上周
								</div>
							</div>
						</div>
					</li>
			        <li>
						<div class="t1">
							<div align="center" class="float" style="background-color: rgba(243, 133, 124, 1);width: 56px;height: 56px;line-height: 56px;border-radius: 30px;">
								<img src="static/img/main/t4.png" />
							</div>
							<div class="float" style="    margin-left: 15px;">
								<div class="title">本周投诉量</div>
								<div id="countusedordersum" name="countusedordersum" class="je">132</div>
								<div>
									<img src="static/img/main/bottom.png">
									<span style="color: rgba(240, 65, 51, 1);">10% </span>同比上周
								</div>
							</div>
						</div>
					</li> 
				</ul>
				<div class="order" style="padding-left: 5px;">
					<div class="float" style="width: 49.5%;overflow: hidden;">
						<!-- <div id="bzImg" style="width:600;height:400px;border: 1px solid #ccc;"></div>
						<div id="zxImg" style="width:600;height:400px;    border: 1px solid #ccc;margin-top: 20px;"></div> -->
						<div id="jiaofeichart"  style="width: 550px;height:400px;"></div>
						<div id="jiluchart"  style="width: 550px;height:400px;"></div>
					</div>
					<div class="float" style="width: 49.5%;padding: 20px 20px 20px 20px;margin-left: 10px;border: 1px solid rgba(235, 235, 235, 1);">
						
						
						
						<div id="showcoupons">
							<div class="jy-history">历史记录</div>
							<div style="width: 100%;overflow: hidden;">
								<div class="float" style="overflow: hidden;">
								    <div style="margin-top: 10px">
									    2018/11/10
								    </div>
									<div style="border-bottom: 1px solid #ccc;line-height: 40px;">
										<img style="width: 16px;" src="static/img/main/text.png" /> 会议室预定
									</div>
									<div style="line-height: 40px;color: #ccc;padding-left: 20px;">
										剩余124个会议室未预定，已预订137
									</div>
								</div>
								
							</div>
							<div style="width: 100%;overflow: hidden;">
								<div class="float" style="overflow: hidden;">
								    <div style="margin-top: 10px">
									    2018/11/11
								    </div>
									<div style="border-bottom: 1px solid #ccc;line-height: 40px;">
										<img style="width: 16px;" src="static/img/main/text.png" /> 投诉处理
									</div>
									<div style="line-height: 40px;color: #ccc;padding-left: 20px;">
										已处理投诉101个，未处理投诉43个
									</div>
								</div>
								
							</div>
							<div style="width: 100%;overflow: hidden;">
								<div class="float" style="overflow: hidden;">
								    <div style="margin-top: 10px">
									    2018/11/10
								    </div>
									<div style="border-bottom: 1px solid #ccc;line-height: 40px;">
										<img style="width: 16px;" src="static/img/main/text.png" /> 会议室预定
									</div>
									<div style="line-height: 40px;color: #ccc;padding-left: 20px;">
										剩余124个会议室未预定，已预订137
									</div>
								</div>
								
							</div>
							<div style="width: 100%;overflow: hidden;">
								<div class="float" style="overflow: hidden;">
								    <div style="margin-top: 10px">
									    2018/11/10
								    </div>
									<div style="border-bottom: 1px solid #ccc;line-height: 40px;">
										<img style="width: 16px;" src="static/img/main/text.png" /> 会议室预定
									</div>
									<div style="line-height: 40px;color: #ccc;padding-left: 20px;">
										剩余124个会议室未预定，已预订137
									</div>
								</div>
								
							</div>
							

							
							
							
						</div>
						<div id="huiyishichart"  style="width: 500px;height:400px;"></div>
					</div>
				</div>

			</div>
		</div>
	</body>
	<script src="static/js/main/echarts.common.min.js"></script>
	<script src="static/js/jquery.min.js"></script>
	<script src="static/js/bootstrap.min.js"></script>
	<!-- 验证插件 -->
	<script type="text/javascript" src="static/js/lib/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="static/js/app/app.js"></script>
	<script type="text/javascript" src="static/js/cookies.js"></script>
	<script type="text/javascript" src="static/js/lib/MD5.js"></script>
	<script type="text/javascript" src="static/js/app/net.js"></script>
	<script type="text/javascript">
		var shop = 0;
		jQuery(document).ready(function() {
			 /* echarts */ 
	        var myChart = echarts.init(document.getElementById('jiaofeichart'));

	       // 指定图表的配置项和数据
	        var option = {
	        		title : {
	        	        text: '授权车辆类型',
	        	        
	        	        x:'center'
	        	    },
	        	    tooltip : {
	        	        trigger: 'item',
	        	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	        	    },
	        	    legend: {
	        	        orient: 'vertical',
	        	        left: 'left',
	        	        data: ['救护车','市领导','院领导','高管','消防车']
	        	    },
	        	    series : [
	        	        {
	        	            name: '访问来源',
	        	            type: 'pie',
	        	            radius : '55%',
	        	            center: ['50%', '60%'],
	        	            data:[
	        	                {value:134, name:'救护车'},
	        	                {value:40, name:'市领导'},
	        	                {value:50, name:'院领导'},
	        	                {value:88, name:'高管'},
	        	                {value:133, name:'消防车'}
	        	            ],
	        	            itemStyle: {
	        	                emphasis: {
	        	                    shadowBlur: 10,
	        	                    shadowOffsetX: 0,
	        	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	        	                }
	        	            }
	        	        }
	        	    ]
	     };

	     // 使用刚指定的配置项和数据显示图表。
	     myChart.setOption(option);
	     /*end echarts  */   
			
			var jiluChart = echarts.init(document.getElementById('jiluchart'));
			var option = {
					title : {
	        	        text: '本周来访车辆统计'
	        	       
	        	    },
					xAxis: {
				        type: 'category',
				        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
				        data: [120, 200, 150, 80, 70, 110, 130],
				        type: 'line',
				        symbol: 'triangle',
				        symbolSize: 20,
				        lineStyle: {
				            normal: {
				                color: 'green',
				                width: 4,
				                type: 'dashed'
				            }
				        },
				        itemStyle: {
				            normal: {
				                borderWidth: 3,
				                borderColor: 'yellow',
				                color: 'blue'
				            }
				        }
				    }]
	     };
			jiluChart.setOption(option);
			
			
			
			var huiyishichart = echarts.init(document.getElementById('huiyishichart'));
			var option = {
					 title : {
					        text: '会议室状态',
					       
					        x:'center'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient: 'vertical',
					        left: 'left',
					        data: ['已预订','未预定','待审核','维修中']
					    },
					    series : [
					        {
					            name: '状态',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            data:[
					                {value:90, name:'已预订'},
					                {value:39, name:'未预定'},
					                {value:40, name:'待审核'},
					                {value:16, name:'维修中'}					                
					            ],
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]	
					
	     };
			huiyishichart.setOption(option);
			
			
			
			
			
			/* --------------------- */
			
			shop = Cookies.get("shopid");
			if(shop.length!= ''){
				$('.code').show();
			}
			loadOrderInfoBycate();

			$('#search_code_btn').click(function(e) {
				//查询参数准备
				var code = $("#code").val();
				var shopid = shop;

				var info = {
					verifyCode: code,
					shop: parseInt(shopid)
				};
				//接口调用
				doPost("order/checkOrderCode", info, function(data) {
					//加载数据列表
					if(data.success) {
						var data = data.data;
						if(data.orderType == 2) {
							alert('兑换券验证成功')
						}
						alert('验证成功');
					} else {
						alert(data.desc);
					}
				});
			});
			
			
			
			
		});
		var loadOrderInfoBycate = function() {

			var Info = {};
			if(!!shop && parseInt(shop) != 0) {
				eval('Info.shopid=' + parseInt(shop));
			}
			//Info.checkcode = str_hmac_md5(settings.checkcodekey,JSON.stringify(Info.data));
			//	Info.checkcode = hex_md5(JSON.stringify(Info.data));
			//	syslog(JSON.stringify(Info));

			doPost("order/myChart", Info, function(data) {
				if(data.success == true) {
					syslog('data----' + JSON.stringify(data));
					$('#countorder').html(data.data.countorder);
					$('#countpaysum').html(data.data.countpaysum);
					$('#countusedordersum').html(data.data.countusedordersum);
					$('#countpayordersum').html(data.data.countpayordersum);
					goThePage(data.data.Couponsitem);
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('zxImg'));
					option = {
						title: {
							text: '订单费用',
							x: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
						},
						series: [{
							name: '访问来源',
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: data.data.orderpaysum,
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
					var myChart1 = echarts.init(document.getElementById('bzImg'));
					option1 = {
						title: {
							text: '订单数量',
							x: 'center'
						},
						xAxis: {
							type: 'category',
							data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
						},
						yAxis: {
							type: 'value',
							boundaryGap: [0, 0.1],
							minInterval: 1
						},
						series: [{
							data: data.data.orderNum,
							type: 'line'
						}]
					};
					// 使用刚指定的配置项和数据显示图表。
					myChart1.setOption(option1);
				}

			});

		}

		function goThePage(content) {

			$('#showcoupons').html("");
			var str = '<div class="jy-history">交易历史</div>';

			for(var i = 0; i < content.length; i++) {
				//console.log(r[i]);
				str += '<div style="width: 100%;overflow: hidden;">' +
					'<div class="float" style="overflow: hidden;">' +
					'<div style="border-bottom: 1px solid #ccc;line-height: 40px;">' +
					'<img style="width: 16px;" src="static/img/main/text.png" />' +
					content[i].couponnames +
					'</div>' +
					'<div style="line-height: 40px;color: #ccc;padding-left: 20px;">' +
					'消费时间：	' + content[i].orderTime + "        " + '单号：' + content[i].ordernumber +
					'</div>' +
					'</div>' +
					'<div class="price" style="line-height: 80px;float: right;padding-left: 106px;">' +
					'+' + content[i].price +
					'</div>' +
					'</div>';
			}
			$('#showcoupons').html(str);
		}
	</script>
	<!--<script type="text/javascript">
	 // 基于准备好的dom，初始化echarts实例

</script>-->

</html>